<template>
  <!-- 关联变更 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="requestCode"
      :tool-button="false"
      :pagination="false"
      :height="list.length == 0 ? 200 : list.length < 9 ? '' : 400"
    >
      <template #priorityName="scope">
        <div>
          <span
            v-if="scope.row.priorityColor"
            :style="{ background: scope.row.priorityColor }"
            style="padding: 0 8px; color: #ffffff"
          >
            {{ scope.row.priorityName }}
          </span>
          <span v-else>{{ scope.row.priorityName }}</span>
        </div>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="AssociationChange">
import { ref, reactive, onMounted, watch } from "vue";

import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";

import { findPagerChange } from "@/api/modules/assetManagement";

import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();

// 表格配置项
const columns = reactive([
  { prop: "eno", label: "序号", width: 110 },
  { prop: "changeNo", label: "编号" },
  { prop: "etitle", label: "标题" },
  { prop: "statusName", label: "状态", width: 120 },
  { prop: "priorityName", label: "优先级", width: 120 },
  { prop: "createTime", label: "创建时间", width: 175 },
  { prop: "technicianName", label: "创建者", width: 140 }
]);

const props = defineProps({
  ciId: Number || String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();
const list = ref<any[]>([]);
const loading = ref(true);

const getList = () => {
  let txt = `queryDTO.ciId=${props.ciId}&queryDTO.lastUpdater=${userStore.username}`;
  findPagerChange(txt, {
    _search: false,
    nd: new Date().getTime(),
    sidx: "eno",
    sord: "desc",
    page: 1,
    rows: 20
  })
    .then((res: any) => {
      console.log(res);
      loading.value = false;
      list.value = res.data || [];
    })
    .catch(() => {
      loading.value = false;
    });
};

onMounted(() => {
  getList();
});

watch(
  () => props.ciId,
  () => {
    list.value = [];
    getList();
  }
);
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
